<template>
    <h3>Composition API 组合式 api</h3>
    <div>
      <p>{{ str }}</p>
      <p>{{ str2 }}</p>
      <button type="button" @click="changeStr">修改str</button>
    </div>
    <!-- <StuDemo5></StuDemo5> -->
  </template>

  <script>
  import { ref } from 'vue'
  // import StuDemo5 from '@/views/study3/StuDemo5.vue'
  export default {
    name:'Study1StudDemo2',
    // components:{StuDemo5},
    // 组件的名称定义规范：和文件名保持一致，使用大驼峰书写，如果有目录最好加上目录保证组件名的唯一性
    // setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，
    // 组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
    setup() {
      // setup中访问this是undefined。
      console.log(this) // undefined
  
      // 普通变量
      let str = '我是组合式api的普遍变量'
  
      // 响应式变量
      const str2 = ref('我是响应式变量')
  
      const changeStr = () => {
        console.log('changeStr')
        str = '我不能响应式显示UI的效果，修改我没用'  // 此处str的值不会改变，因为return返回时会再次检查类型
        console.log(str)
        str2.value = '我是响应变量，我可以出发UI的更新'
  
        fun1()
      }
  
      const fun1 = () => {
        console.log('fun1')
      }
  
      // setup函数返回的对象中的内容，可直接在模板中使用。
      return {
        str,
        changeStr,
        str2
      }
    }
  }
  </script>
  
  <style></style>
  